<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<style>
  body {
    margin: 0;
    padding: 0;
  }

  form {
    margin-block-end: 0;
  }

  .search-container {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 5px;
  }

  /* 样式搜索框输入框 */
  .search-container input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 10px 20px;
  }

  /* 样式搜索按钮 */
  .search-container button {
    padding: 6px 12px;
    background-color: #3498db;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    border: none;
  }

  /* 鼠标悬停时改变按钮背景色 */
  .search-container button:hover {
    background-color: #0c83ff;
  }

  #resetBtn {
    background-color: coral;
  }

  .add-delete-container {
    padding: 20px;
    display: flex;
    background-color: #ffffff;
    border-radius: 5px;
    margin-top: 10px;
  }

  .edit-btn {
    padding: 6px 12px;
    background-color: #3498db;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    margin-right: 10px;
  }

  .edit-btn:hover {
    background-color: #0c83ff;
  }

  .cancel-btn {
    background-color: #ffffff;
    color: grey;
    border: 1px solid black;
  }

  .cancel-btn:hover {
    background-color: #f2f2f2;
  }

  #addBtn {
    background-color: cornflowerblue;
    color: cyan;
  }

  #addBtn:hover {
    background-color: #0c83ff;
  }

  #deleteBtn {
    background-color: red;
    opacity: 0.5;
    color: white;
  }

  #deleteBtn:hover {
    opacity: 1;
  }

  .user-table {
    display: flex;
    background-color: #ffffff;
    flex-direction: column;
    padding: 20px;
    /* 将元素垂直排列 */
    border-radius: 5px;
    margin-top: 10px;
  }

  .table-header {
    display: flex;
    background-color: #f7f5f5;
    align-items: center;

    .header-left {
      display: flex;
      width: 70%;
    }

    .header-right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 30%;
    }
  }

  .header-left span {
    flex: 1;
  }

  .header-right span {
    margin-right: 80px;
  }

  span {
    padding: 10px 20px;
  }

  input[type="checkbox"] {
    margin-left: 20px;
  }

  .user-table-item {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-bottom: 1px solid #f7f5f5;
    padding: 10px 20px;

    .table-item-left {
      display: flex;
      width: 70%;
    }


    .table-item-right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 30%;
    }
  }

  .table-item-left span {
    flex: 1;
  }

  .edit-btn-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 50px;
  }

  .modify-btn {
    background-color: cornflowerblue;
    color: cyan;
  }

  .modify-btn:hover {
    background-color: #0c83ff;
  }

  .delete-btn {
    background-color: red;
    opacity: 0.5;
    color: white;
  }

  .delete-btn:hover {
    background-color: red;
    opacity: 1;
  }

  .list-container {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 20px 40px;
    background-color: #ffffff;
  }

  .list-container div {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list-container div:hover {
    background-color: #0c83ff;
    cursor: pointer;
  }

  #prevBtn {
    width: 14px;
  }

  #nextBtn {
    width: 14px;
  }

  #userDialog {
    position: relative;
    width: 300px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
  }

  #modifyDialog {
    position: relative;
    width: 300px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
  }

  .close {
    width: 20px;
    height: 20px;
    padding: 5px;
    position: absolute;
    top: 5px;
    right: 5px;
  }

  .close:hover {
    cursor: pointer;
    background-color: dodgerblue;
  }

  #user-model-form {
    display: flex;
    flex-direction: column;
    max-width: 400px; /* 设置最大宽度 */
    justify-content: center;
    margin-top: 30px;
  }

  #user-model-form input {
    width: 180px;
    padding: 4px; /* 添加内边距 */
    border-radius: 4px; /* 圆角 */
    box-sizing: border-box;
  }

  #user-model-form select {
    width: 90px;
    padding: 4px; /* 添加内边距 */
    border-radius: 4px; /* 圆角 */
    box-sizing: border-box;
  }

  #modify-model-form {
    display: flex;
    flex-direction: column;
    max-width: 400px; /* 设置最大宽度 */
    justify-content: center;
    margin-top: 30px;
  }

  #modify-model-form input {
    width: 180px;
    padding: 4px; /* 添加内边距 */
    border-radius: 4px; /* 圆角 */
    box-sizing: border-box;
  }

  #modify-model-form select {
    width: 90px;
    padding: 4px; /* 添加内边距 */
    border-radius: 4px; /* 圆角 */
    box-sizing: border-box;
  }

  .input-container {
    display: flex;
    justify-content: flex-start;
    margin: 5px 0;
    align-items: center;
  }

  .input-container span {
    font-size: 14px;
    width: 50px;
  }

  #currentAvatar {
    width: 60px;
    display: none;
  }

  .dialog-btn-container {
    margin-top: 20px;
  }

  .sure-btn {
    background-color: #4CAF50;
    color: white;
  }

  .sure-btn:hover {
    background-color: #3e8e41;
  }
</style>

<div class="search-container">
  <form action="/search" method="get" style="margin-right: 20px;" id="searchForm">
    <input type="text" name="q" placeholder="请输入关键词...">
    <button style="margin-top: 2px;" id="searchBtn">搜索</button>
    <button style="margin-top: 2px;" id="resetBtn">重置</button>
  </form>
</div>

<div class="add-delete-container">
  <button class="edit-btn" id="addBtn" onclick="showUserDialog()">添加用户</button>
  <button class="edit-btn" id="deleteBtn">批量删除</button>
</div>

<div class="user-table">
  <div class="table-header">
    <div class="header-left">
      <input type="checkbox">
      <span>学号</span>
      <span>昵称</span>
      <span>权限</span>
      <span>积分</span>
    </div>
    <div class="header-right">
      <span>操作</span>
    </div>
  </div>
</div>

<c:forEach items="${users_key}" var="user">
  <div class="user-table-item">
    <div class="table-item-left">
      <input type="checkbox">
      <span>${user.id}</span>
      <span>${user.nickname}</span>
      <c:if test="${user.status}">
        <span>管理员</span>
      </c:if>
      <c:if test="${!user.status}">
        <span>学生</span>
      </c:if>
      <span>${user.score}</span>
    </div>
    <div class="table-item-right">
      <div class="edit-btn-container">
        <button class="edit-btn modify-btn">编辑</button>
        <button class="edit-btn delete-btn">删除</button>
      </div>
    </div>
  </div>
</c:forEach>


<div class="list-container">
  <div class="arrow-item" onclick="prevPage()">
    <img src="../assets/images/箭头-左.png" alt="上一页" id="prevBtn">
  </div>
  <div>
    <span id="currentPage">${current_page}</span>
  </div>
  <div class="arrow-item" onclick="nextPage()">
    <img src="../assets/images/箭头-右.png" alt="上一页" id="nextBtn">
  </div>
  <span>总共 ${total_page} 页</span>
</div>

<dialog id="userDialog">
  <img src="../assets/images/关闭.png" alt="关闭" class="close" onclick="userDialog.close()">

  <form id="user-model-form">
    <div class="input-container">
      <span>学号:</span>
      <label>
        <input name="id" placeholder="请输入学号" required autocomplete="off">
      </label>
    </div>
    <div class="input-container">
      <span>密码:</span>
      <label>
        <input name="password" type="password" placeholder="请输入密码" required autocomplete="off">
      </label>
    </div>
    <div class="input-container">
      <span>权限:</span>
      <label>
        <select name="role">
          <option value="1">管理员</option>
          <option value="0">学生</option>
        </select>
      </label>
    </div>
    <div class="edit-btn-container dialog-btn-container">
      <button class="edit-btn cancel-btn" onclick="userDialog.close()">取消</button>
      <button class="edit-btn sure-btn" onclick="addUser()">确定</button>
    </div>
  </form>
</dialog>

<dialog id="modifyDialog">
  <img src="../assets/images/关闭.png" alt="关闭" class="close" onclick="closeModifyDialog()">

  <form id="modify-model-form">
    <div class="input-container" style="display: none">
      <span>学号:</span>
      <label>
        <input name="id" autocomplete="off">
      </label>
    </div>
    <div class="input-container">
      <span>昵称:</span>
      <label>
        <input name="nickname" placeholder="请输入昵称" required autocomplete="off">
      </label>
    </div>
    <div class="input-container">
      <span>头像:</span>
      <label>
        <input type="file" name="avatar" id="avatar" style="display: none" onchange="handleFileChange(event)">
        <button class="edit-btn" onclick="triggerUpload()">上传头像</button>
      </label>
      <img src="" alt="" id="currentAvatar">
    </div>
    <div class="input-container">
      <span>权限:</span>
      <label>
        <select name="role">
          <option value="管理员">管理员</option>
          <option value="学生">学生</option>
        </select>
      </label>
    </div>
    <div class="edit-btn-container dialog-btn-container">
      <button class="edit-btn cancel-btn" onclick="closeModifyDialog()">取消</button>
      <button class="edit-btn sure-btn" onclick="modifyUser()">确定</button>
    </div>
  </form>
</dialog>


<script>
  document.getElementById('searchForm').addEventListener('submit', function (event) {
    event.preventDefault()
  })
  document.getElementById('user-model-form').addEventListener('submit', function (event) {
    event.preventDefault()
  })
  document.getElementById('modify-model-form').addEventListener('submit', function (event) {
    event.preventDefault()
  })

  function showUserDialog() {
    // 获取对话框中的表单
    const form = document.getElementById('user-model-form')

    // 清除输入框的值
    form.querySelectorAll('input').forEach(function (input) {
      input.value = ''
    })

    // 重置选择框的值
    form.querySelectorAll('select').forEach(function (select) {
      select.value = select.querySelector('option').value
    })

    // 显示对话框
    userDialog.showModal()
  }

  function addUser() {
    const form = document.getElementById('user-model-form')
    const data = new FormData(form)
    console.log(data.get('role'))
    const xhr = new XMLHttpRequest()
    xhr.open('POST', '/day_day_up/user?type=0', true)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        const res = xhr.response
        if (res.code === 200) {
          userDialog.close()
          window.location.reload()
        } else {
          alert(res.msg)
        }
      }
    }

    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.responseType = 'json'
    xhr.send('id=' + data.get('id') + '&password=' + data.get('password') + '&role=' + data.get('role'))
  }


  // 编辑用户弹窗
  const editButtons = document.querySelectorAll('.modify-btn')

  editButtons.forEach(function (editBtn) {
    editBtn.addEventListener('click', function () {
      const userItem = editBtn.closest('.user-table-item')
      const userId = userItem.querySelector('span:nth-child(2)').innerText;
      const userName = userItem.querySelector('span:nth-child(3)').innerText;
      const userRole = userItem.querySelector('span:nth-child(4)').innerText;

      const modifyModelForm = document.querySelector('#modify-model-form')
      modifyModelForm.querySelector('input[name="id"]').value = userId
      modifyModelForm.querySelector('input[name="nickname"]').value = userName
      if (userRole === '管理员') {
        modifyModelForm.querySelector('select[name="role"] option[value="管理员"]').selected = true
      } else {
        modifyModelForm.querySelector('select[name="role"] option[value="学生"]').selected = true
      }

      modifyDialog.showModal()
    })
  })

  function modifyUser() {
    const form = document.getElementById('modify-model-form')
    const data = new FormData(form)
    const xhr = new XMLHttpRequest()
    xhr.open('POST', '/day_day_up/user?type=2', true)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        modifyDialog.close()
        window.location.reload()
      }
    }

    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.responseType = 'json'
    xhr.send('id=' + data.get('id') + '&nickname=' + data.get('nickname') + '&role=' + data.get('role'))
  }

  function closeModifyDialog() {
    var avatarImg = document.getElementById('currentAvatar')
    avatarImg.src = ''
    avatarImg.style.display = 'none'
    modifyDialog.close()
  }

  function triggerUpload() {
    document.getElementById('avatar').click()
  }

  function handleFileChange(event) {
    if (event.target.files.length > 1) {
      alert('只能上传一个文件')
      return
    }
    var file = event.target.files[0];
    if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
      event.target.value = ''
      alert('请上传图片')
      return
    }

    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
      var avatarImg = document.getElementById('currentAvatar')
      avatarImg.src = e.target.result
      avatarImg.style.display = 'block'
    }
  }

  // 上一页
  function prevPage() {
    let currentPage = parseInt(document.getElementById('currentPage').innerHTML)
    if (currentPage > 1) {
      currentPage--
      document.getElementById("currentPage").innerHTML = currentPage
      xhr = new XMLHttpRequest()
      xhr.open("GET", "/day_day_up/user?current_page=" + currentPage, true)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          window.location.reload()
        }
      }
      xhr.send()
    }
  }

  // 下一页
  function nextPage() {
    let currentPage = parseInt(document.getElementById('currentPage').innerHTML);
    if (currentPage < ${total_page}) {
      currentPage++
      document.getElementById('currentPage').innerHTML = currentPage
      xhr = new XMLHttpRequest()
      xhr.open('GET', '/day_day_up/user?current_page=' + currentPage, true)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          window.location.reload()
        }
      }
      xhr.send()
    }
  }
</script>